<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<style>
  #app {
    color: #2c3e50;
    font-family: Roboto, sans-serif;
  }
  .label {
    display: inline-block;
    min-width: 160px;
  }
</style>
<div id="app">
  <h1>{{ title }}</h1>
  <p><strong class="label">Text:</strong>{{ text }}</p>
  <p><strong class="label">Plus Text:</strong>{{ plusText }}</p>
  <p><strong class="label">Upper Text:</strong>{{ text | supplyUpper }}</p>
  <button @click="toggleText">切换文本</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
  // 强耦合，需要被混入组件的data根节点中包含text属性
  let mixin = {
    data () {
      return {
        title: 'Test for mixin'
      }
    },
    mounted () {
      console.log('mixin mounted')
    },
    methods: {
      toggleText () {
        this.text = 'mixin text'
      }
    },
    computed: {
      plusText () { // 此处需要创建函数作用域以使this指向Vue实例
        return '+ ' + this.text + ' +'
      }
    },
    filters: { // 选项过滤器
      supplyUpper: value => value.toUpperCase()
    },
    watch: { // 监听器
      text (value) {
        console.log('mixin text: ' + value)
      }
    }
  }
  let vm = new Vue({
    el: '#app',
    mixins: [ mixin ],
    data () {
      return {
        title: 'A Title',
        text: 'which one?'
      }
    },
    mounted () {
      console.log('instance mounted')
    },
    methods: {
      toggleText () {
        this.text = 'instance text'
      }
    },
    watch: {
      text (value) {
        console.log('instance text: ' + value)
      }
    }
  })
</script>
</body>
</html>